<template>
  <div class="detail">
    <van-nav-bar
      title="工单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-cell title="工单类型" :value="$route.query.type" />
      <van-cell title="工单状态" :value="$route.query.status" />
      <van-cell title="项目名称" :value="$route.query.engineer_name" />
      <van-cell title="设备名称" :value="$route.query.device_name" />
      <van-cell
        title="申报原因"
        :value="$route.query.bill_why"
        v-if="$route.query.bill_why !== null"
      />
      <van-cell title="申报原因" value="无" v-else />
      <van-cell
        title="申报图片"
        value=""
        v-if="$route.query.begin_photos.length > 0"
      />
      <van-cell value="" v-if="$route.query.begin_photos.length > 0">
        <img
          :src="item"
          alt=""
          v-for="(item, index) in $route.query.begin_photos"
          :key="index"
        />
      </van-cell>
      <van-cell title="申报图片" value="暂无图片" v-else />
    </van-cell-group>
    <div class="endphoto" v-if="$route.query.status == '已完成'">
      <van-cell
        title="现场图片"
        value=""
        v-if="$route.query.end_photos.length > 0"
      ></van-cell>
      <van-cell value="" v-if="$route.query.end_photos.length > 0">
        <img
          :src="item"
          alt=""
          v-for="(item, index) in $route.query.end_photos"
          :key="index"
        />
      </van-cell>
      <van-cell title="现场图片" value="暂无图片" v-else />
    </div>
    <div class="btn" v-if="$route.query.status == '待接单'">
      <van-button type="info" @click="btnClick">确认接单</van-button>
    </div>
    <Complete v-if="$route.query.status == '进行中'"></Complete>
  </div>
</template>

<script>
import { get } from "@/utils/request.js";
import { mapState } from "vuex";
import Vue from "vue";
import { Toast } from "vant";
import Complete from "./Complete.vue";

Vue.use(Toast);
export default {
  computed: {
    ...mapState("user", ["info"]),
  },
  components: {
    Complete,
  },
  methods: {
    //事件监听
    onClickLeft() {
      this.$router.back();
    },
    btnClick() {
      this.confirmOrder();
    },
    //网络请求

    confirmOrder() {
      get("/workorder/takeOrder", {
        id: this.$route.query.id,
        account_id: this.info.id,
      }).then((res) => {
        if (res.status == 200) {
          Toast.success("成功接单");
          this.$router.back();
        }
      });
    },
  },
};
</script>

<style lang="less">
.van-cell__value {
  text-align: left;
}
.btn {
  padding: 0 10px;
  .van-button {
    border-radius: 3px;
    margin-top: 20px;
    width: 100%;
  }
}
.van-cell {
  img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
}
</style>